<template>
  <div>
	
	<myheader></myheader>
	<!-- 面包屑导航 -->
	<Breadcrumb :datas = 'datas'></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">	
			<table>
				<tr>
					<td style="padding:5px;">
						商品名称：
					</td>
					<td style="padding:5px;">
						<input type="text" v-model="name">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						商品简介：
					</td>
					<td style="padding:5px;">
						<quill-editor  ref="myTextEditor" :content="desc" @change="editorchange($event)"></quill-editor>
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						商品标签：
					</td>
					<td style="padding:5px;">
						<TagInput v-model="mytags" type="string" split="," placeholder="请输入标签"></TagInput>
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						颜色：
					</td>
					<td style="padding:5px;">
						<input type="text" v-model="color">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						号码：
					</td>
					<td style="padding:5px;">
						<input type="text" v-model="size">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						季节：
					</td>
					<td style="padding:5px;">
						<input type="text" v-model="season">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						价格：
					</td>
					<td style="padding:5px;">
						<input type="text" v-model="price">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						
					</td>
					<td style="padding:5px;">
						<Button @click="submit" color='blue'>提交</Button>
					</td>
				</tr>
			</table>
		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>

// 导包
import myheader from './myheader'
import myfooter from './myfooter'
import { config } from '../config'
// 调用富文本编辑器
import { quillEditor } from 'vue-quill-editor'
// 富文本编辑器外部引用样式  三种样式三选一引入即可
import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.bubble.css'
// 富文本基于quill
// import * as Quill from 'quill';

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  // 声明面包屑导航
	  datas: [{title: '首页', route: {name: 'index'}}, {title: '修改商品页'}],
	  name: '',
	  desc: '',
	  color: '',
	  size: '',
	  season: '',
	  price: 0,
	  cate_id: 1,
	  // 商品标签
	  mytags: '',
	  // 商品id
	  id: '',
	  // 存储编辑器信息
	  content: ''
    }
  },

  // 注册组件
  components: {
	  'myheader': myheader,
	  'myfooter': myfooter,
	  quillEditor
  },

  mounted:function(){
	  // 接收参数
	  var id = this.$route.query.id;
	  this.id = id;

	  //调用接口
  	  this.getdata();
  },
  
  methods:{
	  // 编辑器更改方法
	  editorchange: function ({editor, html, text}) {
		  this.desc = html;
		  console.log(this.desc);
	  },

	  // 提交
	  submit: function () {
		  // 拼接商品规格
		  var parms = {};
		  parms['color'] = this.color;
		  parms['size'] = this.size;
		  parms['season'] = this.season;

		  // console.log(parms);

		  // 格式化字符串
		  parms = JSON.stringify(parms);
		  // console.log(parms);

		  // 转换为json
		  // parms = JSON.parse(parms);
		  // console.log(parms);

		  // 发送请求
          this.axios.get("http://127.0.0.1:8000/updategoods/",{
            params: {
              name: this.name,
			  desc: this.desc,
			  parms: parms,
			  price: this.price,
			  cate_id: this.cate_id,
			  id: this.id
            }
          	}).then(result => {
			console.log(result);
			this.$Message(result.data.message);
			})
		},

		// 商品信息接口
	  	getdata: function () {
		// 发送请求
		this.axios.get('http://localhost:8000/goodinfo/',{
			params: {
			  id: this.id
			}}).then((result) =>{

			  console.log(result);
			  
			  this.name = result.data.name;
			  this.desc = result.data.desc;
			  this.price = result.data.price;
			  this.img = result.data.img;

			  var parms = result.data.parms;
			  // 转换类型
			  parms = JSON.parse(parms);
			  
			  this.color = parms.color;
              this.size = parms.size;
              this.season = parms.season;
              this.src = 'http://localhost:8000/static/upload/' + result.data.img;
			  console.log(parms);
		});
		this.axios.get("http://127.0.0.1:8000/gettags/",{
            params: {
			  id: this.id
            }
			}).then(result => {
				console.log(result);
				// 赋值
				var mytags = result.data.tags;
				mytags = mytags.join(',');
				this.mytags = mytags;
				console.log(mytags);
			})
	  
		}
		  
	  },

	  
}


</script>
 
<style>
/* 控制编辑器高度 */
.ql-editor{
	height: 100px;
}

</style>